<template>
  <div class="search-result">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <van-cell 
      v-for="(artice, index) in list" 
      :key="index" 
      :title="artice.title" />
    </van-list>
  </div>
</template>

<script>
import { getSearchResult } from '../../../api/search.js'
export default {
  ame: "SearchResult",
  components: {},
  props: {
    searchText: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      error: false,
      page: 1,
      perPage: 20
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
   async onLoad() {
     try {
       // 1. 请求获取数据
       const { data } = await getSearchResult({
         page: this.page,  //页码
         per_page: this.perPage,  // 每页大小
         q: this.searchText  // 查询关键词
       })
       const { results } = data.data
       this.list.push(...results)
       console.log(data);
       this.loading = false

      if(results.length) {
        this.page++
      }else {
        this.finished = true
      }
     } catch (err) {
       this.$toast('数据获取失败, 请稍后重试')
       this.error = true
       this.loading = false
     }
     
    },
  },
};
</script>

<style scoped lang="less">

</style>